<template>
  <div class="login">
    <div class="loginDiv">
      <h1 class="title">追书神器</h1>
      <div class="tab">
        <a
          href="javascript:;"
          @click="active = 0"
          :class="{ active: active == 0 }"
          >登录</a
        >
        <a
          href="javascript:;"
          @click="active = 1"
          :class="{ active: active == 1 }"
          >注册</a
        >
      </div>
      <div class="tabcon">
        <!-- 登录 -->
        <div class="logging" v-show="active == 0">
          <input type="text" placeholder="请输入账号" v-model="loggingnName" />
          <input type="text" placeholder="请输入密码" v-model="loggingPassw" />
          <div class="verification">
            <input type="text" placeholder="请输入验证码" />
            <span>1111</span>
          </div>
          <button @click="login">登录</button>
        </div>
        <!-- 注册 -->
        <div class="register" v-show="active == 1">
          <input type="text" placeholder="请输入3-12位用户名" v-model="registerName" />
          <input type="text" placeholder="请输入6-12位密码" v-model="registerPassw" />
          <div class="verification">
            <input type="text" placeholder="请输入验证码" />
            <span>1111</span>
          </div>
          <button @click="Registration">注册</button>
        </div>
      </div>
      <!-- 关闭按钮 -->
      <van-icon name="close" @click="$router.back()" />
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex";
export default {
  data() {
    return {
      active: 0,
      loggingnName: "",
      loggingPassw: "",
      registerName: "",
      registerPassw: "",
      users:JSON.parse(localStorage.getItem("user"))||[],
    };
  },
//   created(){

//   },
  methods:{
      ...mapMutations({
          pushUser:'addUser',
      }),
      //登录
      login(){
          //用户名或密码为空停止
          if(this.loggingnName=="" || this.loggingPassw==""){
              this.$toast('用户名或密码不能为空');
              return;
          }
          //没有找到用户名提示不存在
          let searchUser = this.users.find(item => {
              return item.name==this.loggingnName
          });
          if(!searchUser){
              this.$toast('用户不存在');
              return;
          }
          //密码判断
          if(searchUser.password!=this.loggingPassw){
              this.$toast('密码错误');
              return;
          }  
          //登陆成功的用户提交到vue叉
          this.pushUser(searchUser);
          // 返回上一步
          this.$toast.success({
            message:"登录成功",
            onClose:()=>this.$router.back(),
          });
          
        // console.log(searchUser);
      },
      //注册
      Registration(){
        //账号密码为空停止
        if(this.registerName=="" || this.registerPassw==""){
              this.$toast('用户名或密码不能为空');
              return;
          }
          //添加数组
          this.users.push({
               name:this.registerName,
               password:this.registerPassw,
               id:Math.random().toString(16).substr(2,20),
               bookshelf:[],
               chapters:[], 
           })
            //添加进本地
           localStorage.setItem("user",JSON.stringify(this.users));
          //  清空输入框
          this.registerName=""; this.registerPassw=""
           //提示成功跳转到登录
            this.$toast({
              type:'success',
            message:"注册成功",
            onClose:()=>this.active=0,
          });
      }
  }
};
</script>

<style lang="less">
.login {
  height: 100vh;
  width: 100vw;
  background: url("../assets/images/loginbg.jpg") no-repeat center center;
  background-size: cover;
  .loginDiv {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(255, 255, 255, 0.9);
    width: 75%;
    height: 330px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0 rgb(61, 61, 61);
    .title {
      position: absolute;
      top: -50px;
      right: 0;
      left: 0;
      font-size: 25px;
      font-weight: bolder;
      color: white;
      text-align: center;
    }
    .tab {
      display: flex;
      text-align: center;
      a {
        color: rgb(141, 141, 141);
        font-size: 16px;
        flex: 1;
        padding: 20px 0px 15px;
        &.active {
          position: relative;
          color: #e9335d;
          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 40px;
            height: 0px;
            border-bottom: 2.5px solid #e9335d;
          }
        }
      }
    }
    .tabcon {
      margin-top: 10px;
      position: relative;
      .logging,
      .register {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 16px;
        text-align: center;
        input {
          border-bottom: @borderBtm;
          border-color: rgb(218, 218, 218);
          height: 60px;
          width: 100%;
          font-size: 14px;
          background: transparent;
        }
        .verification {
          display: flex;
          align-items: center;
          input {
            flex: 1;
          }
          span {
            width: 60px;
            height: 25px;
            background: #ccc;
          }
        }
        button {
          margin-top: 24px;
          border-radius: 20px;
          padding: 14px 100px;
          color: white;
          font-size: 14px;
          letter-spacing: 2px;
          background: linear-gradient(to right, #ff512f, #dd2476);
        }
      }
    }

    // 关闭按钮
    .van-icon-close {
      position: absolute;
      font-size: 30px;
      color: white;
      top: -40px;
      left: -20px;
    }
  }
}
</style>